<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>订单详情</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
		<link rel="stylesheet" href="../../css/main.css">
		<link rel="stylesheet" href="../../student/css/head.css">
		<link rel="stylesheet" href="../../css/window.css">
		<link rel="stylesheet" href="https://unpkg.com/vant@2.12/lib/index.css" />
		<style scoped>
			[v-cloak] {
				display: none;
			}

			/* 日历选中颜色  */
			.layui-laydate .layui-bg01 {
				/* background-color: #FEC327 !important; */
				color: #fff !important;
				position: relative;
			}

			.layui-laydate .layui-bg01::after {
				content: '';
				position: absolute;
				width: 22px;
				height: 22px;
				border-radius: 11px;
				background-color: #FEC327;
				left: 50%;
				bottom: 5px;
				margin-left: -11px;
				z-index: -1;
			}

			.layui-laydate .layui-bg02 {
				/* background-color: #CDCBC8 !important; */
				color: #fff !important;
				position: relative;
			}

			.layui-laydate .layui-bg02::after {
				content: '';
				position: absolute;
				width: 22px;
				height: 22px;
				border-radius: 11px;
				background-color: #CDCBC8;
				left: 50%;
				bottom: 5px;
				margin-left: -11px;
				z-index: -1;
			}

			.layui-laydate .layui-bg03 {
				/* background-color: #2184FE !important; */
				color: #fff !important;
				position: relative;
			}

			.layui-laydate .layui-bg03::after {
				content: '';
				position: absolute;
				width: 22px;
				height: 22px;
				border-radius: 11px;
				background-color: #2184FE;
				left: 50%;
				bottom: 5px;
				margin-left: -11px;
				z-index: -1;
			}

			.layui-laydate .layui-text-bg01 {
				color: #fff !important;
				position: relative;
			}

			.layui-laydate .layui-text-bg01 i {
				display: block;
				width: 22px;
				height: 22px;
				border-radius: 11px;
				background-color: #FEC327;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-top: -12px;
				margin-left: -11px;
				z-index: -1;
			}
			.layui-laydate .layui-text-bg01 span {
				display: block;
				position: absolute;
				left: 0;
				bottom: -4px;
				color: #2184FE;
				display: block;
				width: 100%;
				font-size: 11px;
			}
			
			.layui-laydate .layui-text-bg11 {
				color: #fff !important;
				position: relative;
			}
			
			.layui-laydate .layui-text-bg11 i {
				display: block;
				width: 22px;
				height: 22px;
				border-radius: 11px;
				background-color: #368CFA;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-top: -12px;
				margin-left: -11px;
				z-index: -1;
			}
			.layui-laydate .layui-text-bg11 span {
				display: block;
				position: absolute;
				left: 0;
				bottom: -4px;
				color: #2184FE;
				display: block;
				width: 100%;
				font-size: 11px;
			}
			

			.layui-laydate .layui-this {
				background-color: #22cdc9 !important;
				color: #fff !important;
			}

			.layui-laydate .layui-laydate-header {
				background-color: #FEC327 !important;
			}

			#dateTwoInput,
			#dateInput,
			.layui-laydate,
			.layui-laydate-main,
			.layui-laydate-content table {
				width: 100%;
			}

			#order-detail-date .layui-laydate-main {
				width: 100% !important;
			}

			#order-detail-date .layui-laydate {
				border-radius: 10px 10px 0 0 !important;
				overflow: hidden !important;
				border: none !important;
			}

			#order-detail-date #dateTwoInput .layui-laydate {
				border-radius: 10px !important;
				overflow: hidden !important;
				border: none !important;
			}

			#dateTwoInput tbody tr td {
				padding: 12px 5px;
				pointer-events: none;
			}

			#dateTwoInput .layui-this,
			#dateInput .layui-this {
				/* background-color: #fff !important; */
				color: #333 !important;
				background-color: rgba(0, 0, 0, 0) !important;
			}

			.userInfo {
				height: 77px;
				background: #FFFFFF;
				box-shadow: 0px 0px 14px 0px rgba(4, 0, 0, 0.18);
				border-radius: 10px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 8px;
				margin-bottom: 20px;
			}

			.userInfo .imgBox {
				width: 58px;
				height: 58px;
				border-radius: 50%;
				overflow: hidden;
			}

			.userInfo .imgBox img {
				width: 100%;
			}

			.infoBox {
				flex: 1;
				padding-left: 6px;
			}

			.infoBox span {
				font-size: 13px;
			}

			.topUpBtn {
				width: 49px;
				height: 25px;
				background: linear-gradient(0deg, #0271FF, #61B9FE);
				border-radius: 5px;
				border: 0px solid #67BFFD;
				font-family: Source Han Sans CN;
				font-weight: bold;
				font-size: 13px;
				color: #FFFFFF;
				line-height: 25px;
			}

			.dateColorAnnotation {
				height: 30px;
				padding-left: 18px;
				border-radius: 0 0 10px 10px !important;
				background-color: #fff;
				box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
				position: relative;
				top: -5px;
				display: flex;
				font-size: 12px;
				color: #333;
				align-items: center;
			}

			.dateColorAnnotation span {
				width: 9px;
				height: 9px;
				background: #2184FE;
				border-radius: 50%;
				margin-left: 12px;
				margin-right: 4px;
			}

			.dateColorAnnotation span:first-child {
				background: #CDCBC8;
			}

			.dateColorAnnotation span:last-child {
				background-color: #FEC327;
			}

			.selectDateBox {
				height: 59px;
				background: #FFEDBD;
				border-radius: 6px 6px 0px 0px;
				padding: 12px;
				font-size: 12px;
				color: #2184FE;
				position: relative;
				top: 50px;
				z-index: 99;
			}

			.selDateBtn {
				width: 72px;
				height: 25px;
				line-height: 25px;
				background: linear-gradient(0deg, rgba(71, 165, 250, 0.6) 0%, rgba(255, 255, 255, 0.8) 49%);
				box-shadow: 0px 2px 7px 0px rgba(4, 0, 0, 0.04);
				border-radius: 4px;
				border: 1px solid #47A5FA;
				margin-left: 22px;
				position: relative;
			}

			.selDateBtn i {
				position: absolute;
				right: 12px;
				top: 8px;
				content: "";
				display: block;
				width: 0;
				height: 0;
				border-left: 4px solid transparent;
				border-right: 4px solid transparent;
				border-top: 6px solid #47A5FA;
			}
		</style>
		<style scoped>
			.top_up_temp {
				width: 288px;
				background: #FFFFFF;
				border-radius: 15px;
				padding-bottom: 24px;
			}

			.top_up_temp .popup_title {
				font-weight: 500;
				font-size: 16px;
				color: #333333;
			}

			.radioBox {
				padding: 6px 28px;
			}

			.radioBox img {
				width: 14px;
				height: 14px;
				margin-right: 4px;
			}

			.radioBox p {
				display: flex;
				align-items: center;
				width: 90px;
				margin: 0;
			}

			.radioBox>div {
				display: flex;
				align-items: center;
				margin-bottom: 6px;
			}

			.selMoonBox {
				display: flex;
				padding: 0 20px;
				flex-wrap: wrap;
				justify-content: space-between;
				padding-bottom: 20px;
			}

			.selMoonBox>div {
				width: 56px;
				height: 40px;
				background: linear-gradient(0deg, #D3D3D3 0%, #F6F6F6 100%);
				border-image: linear-gradient(0deg, #CACACB, #999999) 10 10;
				border-radius: 5px;
				margin-bottom: 6px;
				margin-right: 2px;
				color: #666666;
			}

			.selMoonBox>div.active {
				background: linear-gradient(0deg, #0271FF, #61B9FE);
				color: #fff;
			}

			.selMoonBox>div p {
				margin: 2px 0;
				font-size: 13px;
			}
		</style>
	</head>

	<body>
		<div style="height: 40px;"></div>
		<div class="header">
			<div class="header_title">订餐详情</div>
			<img src="../../image/return.png" alt="" class="return" onclick="history.back()">
		</div>

		<div id="order-detail-date" v-cloak style="text-align: center; padding: 30px;">
			<div class="userInfo">
				<div class="imgBox">
					<img src="./img/payMoney.png" alt="">
				</div>
				<div class="infoBox">
					<div
						style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
						<span>学生姓名 {{userInfo.studentName}}</span>
						<span>余额 {{userInfo.balance}}</span>
						<span class="topUpBtn" @click="topUpTap">充值</span>
					</div>
					<div style="width: 78px;height: 25px;background: #FFEDBD;border-radius: 6px; font-size: 13px; line-height: 25px; text-align: center;">
						{{isMonthlyFlag}}
					</div>
				</div>
			</div>
			<div class="site-demo-laydate">
				<div class="layui-inline date_time" id="dateInput" style="width: 100%;"></div>
				<div class="dateColorAnnotation">
					<span></span>未收费
					<span></span>包月使用
					<span></span>已收费
				</div>
				<div style="margin-top: -30px;">
					<div class="selectDateBox">
						<div style="display: flex; align-items: center;">
							<span>用餐统计</span>
							<div class="selDateBtn" @click="yearSelBtn">{{selYearValue}}年<i style="right: 4px;"></i>
							</div>
							<div class="selDateBtn" @click="moonSelBtn">{{selMoonValue}}月<i></i></div>
						</div>
						<div style="display: flex;">
							<p>用餐次数&nbsp;&nbsp;&nbsp;&nbsp;{{feeCount}}次</p>
							<p style="margin-left: 50px;">共消费&nbsp;&nbsp;&nbsp;&nbsp;{{feeTotalCount}}元</p>
						</div>
					</div>
					<div class="layui-inline date_time" id="dateTwoInput" style="width: 100%;"></div>
				</div>
			</div>
			<van-popup v-model="top_upPicker" round style="overflow: visible;">
				<div class="top_up_temp">
					<p class="popup_title">餐费充值</p>
					<div class="radioBox">
						<div class="once_top_up_box">
							<p @click="selRadio(1)">
								<img src="./img/radio.png" v-show="topUpType == 2" alt="" />
								<img src="./img/radio-sel.png" v-show="topUpType == 1" alt="" />
								<span>单次充值</span>
							</p>
							<input type="number" v-model="topUpPrice" :disabled="topUpType == 2 ? true : false"
								placeholder="请输入金额" style="width: 90px;" />
						</div>
						<div class="moon_top_up_box">
							<p @click="selRadio(2)">
								<img src="./img/radio.png" v-show="topUpType == 1" alt="" />
								<img src="./img/radio-sel.png" v-show="topUpType == 2" alt="" />
								<span>包月充值</span>
							</p>
							<van-button type="info" size="small" :disabled="topUpType == 1 ? true : false"
								style="width: 98px; position: relative;" @click="baoYueTap">{{selBaoYueYear}}包月
								<div class="layui-inline date_time" id="dateTopUpInput"></div>
							</van-button>
						</div>
					</div>
					<div class="selMoonBox">
						<div v-for="(item,i) in sel_price_moon" :key="i" :class="item.sel == true ? 'active' : 0"
							@click="sel_moon_price_tap(i)">
							<p>{{item.value}}月</p>
							<p>￥{{selMoonPrice}}</p>
						</div>
					</div>
					<div style="display: flex; justify-content: space-between; padding: 0 30px;">
						<van-button type="info" round size="small" @click="lijizhifu" :disabled="lijizhifuDisable"
							style="width: 98px; background: linear-gradient(150deg, #FEC425, #FFA247); border: none;">
							立即支付
						</van-button>
						<van-button type="info" round size="small"
							style="width: 98px;background: linear-gradient(0deg, #0271FF, #61B9FE); border: none;"
							@click="top_upPicker = false">取消</van-button>
					</div>
				</div>
			</van-popup>
			<van-popup v-model="showYearPicker" round position="bottom">
				<van-picker show-toolbar :columns="yearColumns" @cancel="showYearPicker = false"
					@confirm="onYearConfirm"  :default-index="default_year_index"/>
			</van-popup>
			<van-popup v-model="showMoonPicker" round position="bottom">
				<van-picker show-toolbar :columns="moonColumns" @cancel="showMoonPicker = false"
					@confirm="onMoonConfirm" :default-index="default_moon_index"/>
			</van-popup>

			<van-notify v-model="promptShow" :type="showNotifyType">
				<span>{{showNotifyText}}</span>
			</van-notify>
		</div>

		<script src="/scriptZIP/vue.min.js"></script>
		<script src="/scriptZIP/axios.min.js"></script>
		<script src="/scriptZIP/dayjs.min.js"></script>
		<script src="/scriptZIP/zh-cn.min.js"></script>
		<script src="https://unpkg.com/vant@2.12/lib/vant.min.js"></script>
		<script src="/scriptZIP/qs.min.js"></script>
		<script src="/js/common.js"></script>
		<script src="/lib/laydate/laydate.js"></script>
		<script src="/js/jquery-3.2.1.min.js"></script>
		<script>
			/* var timeAll = ["2025-10-31", "2025-10-1", "2025-10-2", "2025-10-3", "2025-7-1", "2025-7-24", "2025-7-29"]; //已交
		var timeIn = ["2025-10-30", "2025-10-6", "2025-10-7", "2025-10-8", "2025-7-9", "2025-7-10", "2025-7-11"]; //未交
		var timePart = ["2025-10-16", "2025-10-13", "2025-10-14", "2025-10-15",]; //补交 */
		</script>
		<!-- <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script> -->
		<script>
			// var vConsole = new window.VConsole();
			dayjs.locale('zh-cn');
			var timeAll, timeIn, timePart, dateInstance, dateTwoInstance;
			var dateValue = '';
			var timeTwoAll;
			var agengtId = localStorage.getItem('agentId');
			var app = new Vue({
				el: '#order-detail-date',
				data: {
					studentId: params().id,
					userInfo: {},//学生信息
					payData: {},
					topUpType: 1, //充值类型
					top_upPicker: false, //充值弹窗
					topUpPrice: '',
					showYearPicker: false,
					showMoonPicker: false,
					selMoonPrice: '',
					selYearValue: '',
					selMoonValue: '',
					promptShow: false,
					selBaoYueYear: '',
					showNotifyType: '',
					showNotifyText: '',
					lijizhifuDisable: false,
					default_year_index: 0,
					default_moon_index: 0,
					sel_price_moon: [{
							value: 1,
							sel: false
						}, {
							value: 2,
							sel: false
						}, {
							value: 3,
							sel: false
						}, {
							value: 4,
							sel: false
						},
						{
							value: 5,
							sel: false
						}, {
							value: 6,
							sel: false
						}, {
							value: 7,
							sel: false
						}, {
							value: 8,
							sel: false
						},
						{
							value: 9,
							sel: false
						}, {
							value: 10,
							sel: false
						}, {
							value: 11,
							sel: false
						}, {
							value: 12,
							sel: false
						},
					],
					moonColumns: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
					yearColumns: ['2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022', '2023', '2024', '2025',
						'2026', '2027', '2028', '2029', '2030'
					],
					selectDateValue: '',
					updateScreenSize: 0,
					timeAll: [], //已收
					timeIn: [], //未收
					timePart: [], //包月 *
					feeCount: 0,
					feeTotalCount: 0,
				},
				created: function() {
					let now = new Date();
					let year = now.getFullYear();
					let month = now.getMonth() + 1; //月份从0开始，所以需要加1
					this.selBaoYueYear = year;
					this.selYearValue = year;
					this.selMoonValue = month;
					this.getUserInfo();
					this.getData(year,month);
				},
				mounted() {
					// this.setDate();
					this.default_year_index = this.yearColumns.indexOf(this.selYearValue.toString())
					this.default_moon_index = this.moonColumns.indexOf(this.selMoonValue.toString())
				},
				computed: {
				    isMonthlyFlag() {
						let now = new Date();
						let month = now.getMonth() + 1; //月份从0开始，所以需要加1
						if(this.userInfo.monthlyFlag == 1){
							return `${month}月包月中`;
						}else{
							return `未包月`;
						}
				    }
				},
				methods: {
					//用户信息
					getUserInfo(){
						axios.get('/api/stuAccount/info/' + this.studentId).then(function(res) {
							console.log('用户信息...',res)
							this.userInfo = res.data;
						}.bind(this));
					},
					sel_moon_price_tap(index) {
						if (this.topUpType == 1) {
							return;
						}
						// this.sel_price_moon[index].sel = !this.sel_price_moon[index].sel;
						if (!this.sel_price_moon[index].sel) {
							this.sel_price_moon[index].sel = true;
							let arr = [];
							this.sel_price_moon.forEach(item => {
								if (item.sel) {
									arr.push(item.value)
								}
							})
							if (arr.length > 1) {
								arr.sort(function(a, b) {
									return a - b; // 升序
								});
								for (let i = 0; i < this.sel_price_moon.length; i++) { //把中间的全选上
									if (this.sel_price_moon[i].value > arr[0] && this.sel_price_moon[i].value < arr[arr
											.length - 1]) {
										this.sel_price_moon[i].sel = true
									}
								}
							}
						} else {
							let arr = [];
							this.sel_price_moon.forEach(item => {
								if (item.sel) {
									arr.push(item.value)
								}
							})
							arr.sort(function(a, b) {
								return a - b; // 升序
							});
							if (arr.length > 2) {
								for (let i = 0; i < this.sel_price_moon.length; i++) { //把当前和小的都不选
									if (this.sel_price_moon[i].value <= (index + 1)) {
										this.sel_price_moon[i].sel = false;
									}
								}
							} else {
								this.sel_price_moon[index].sel = false;
							}
						}

					},
					selRadio(type) {
						if (this.topUpType == type) return;
						this.topUpType = type;
						type == 2 ? this.topUpPrice = '' : this.topUpPrice = this.topUpPrice;
						if (type == 1) {
							for (let i = 0; i < this.sel_price_moon.length; i++) {
								this.sel_price_moon[i].sel = false;
							}
						}
					},
					yearSelBtn() {
						this.showYearPicker = true;
					},
					moonSelBtn() {
						this.showMoonPicker = true;
					},
					onYearConfirm(value) {
						this.selYearValue = value;
						this.showYearPicker = false;
						this.selectDateValue = this.selYearValue + '-' + this.selMoonValue + '-' + '01';
						$('#dateTwoInput').empty();
						dateValue = this.selectDateValue;
						
						$('#dateInput').empty();
						this.getData(this.selYearValue,this.selMoonValue)
					},
					onMoonConfirm(value) {
						this.selMoonValue = value;
						this.showMoonPicker = false;
						this.selectDateValue = this.selYearValue + '-' + this.selMoonValue + '-' + '01';
						$('#dateTwoInput').empty();
						dateValue = this.selectDateValue;
						
						$('#dateInput').empty();
						this.getData(this.selYearValue,this.selMoonValue)
					},
					getData: function(year,month) {
						axios.get('/api/mealReservation/getStudentMonthly/' + this.studentId, {
								params: {
									year: year,
									month: month
								}
							}).then(function(response) {
								let info = response.data;
								if(info.data){
									this.timePart = [];
									this.timeAll = []; //已收
									this.timeIn = []; //未收
									console.log('用餐数据...',info.data)
									for(let i = 0; i<info.data.length; i++){
										info.data[i].date = this.dislodgeZero(info.data[i].date);
										if(info.data[i].chargeType === 0){
											this.timePart.push(info.data[i].date);
										}else if(info.data[i].charge){
											this.timeAll.push(info.data[i].date)
										}else{
											
											this.timeIn.push(info.data[i].date)
										}
									}
									this.setDate();
									this.setTwoDate(info.data);
								}
							}.bind(this))
							.catch(function(error) {
								console.error('Error fetching attendance records:', error);
							});
					},
					// 日期去掉0
					dislodgeZero(str) {
					    let strArray = str.split('-');
					    strArray = strArray.map(function(val) {
					        if (val[0] == '0') {
					            return val = val.slice(1);
					        }else{
					            return val;
					        }
					    })
					    return strArray.join('-');
					},
					setDate() {
						timeAll = this.timeAll;
						timeIn = this.timeIn;
						timePart = this.timePart;
						//直接嵌套显示
						dateInstance = laydate.render({
							elem: '#dateInput',
							position: 'static',
							value: dateValue,
							showBottom: false,
							ready: function(date) {
								// console.log(dates);
								$('#dateInput .layui-laydate-content').find("td").each(function(i, e) {
									// console.log($(e).attr('lay-ymd'));
									if (timeAll.indexOf($(e).attr('lay-ymd')) >= 0) {
										$(e).addClass('layui-bg01');
									} else if (timeIn.indexOf($(e).attr('lay-ymd')) >= 0) {
										$(e).addClass('layui-bg02');
									} else if (timePart.indexOf($(e).attr('lay-ymd')) >= 0) {
										$(e).addClass('layui-bg03');
									}
								});
							}
						});
						//回调 标记
						$('.laydate-next-y,.laydate-next-m,.laydate-prev-y,.laydate-prev-m,.laydate-set-ym,.layui-laydate-content')
							.click(function() {
								$('#dateInput .layui-laydate-content').find("td").each(function(i, e) {
									// console.log(dates.indexOf($(e).attr('lay-ymd')));
									if (!$(e).hasClass('layui-bg01')) {
										if (timeAll.indexOf($(e).attr('lay-ymd')) >= 0) {
											$(e).addClass('layui-bg01');
										} else if (timeIn.indexOf($(e).attr('lay-ymd')) >= 0) {
											$(e).addClass('layui-bg02');
										} else if (timePart.indexOf($(e).attr('lay-ymd')) >= 0) {
											$(e).addClass('layui-bg03');
										}
									}
								});
							});
					},
					setTwoDate(data) {
						timeTwoAll = data.map((item) => {
							let obj = {
								time: item.date,
								fee: item.fee ? item.fee : 0,
								chargeType: item.chargeType
							}
							return obj;
						});
						this.feeCount = timeTwoAll.length;
						this.feeTotalCount = 0;
						timeTwoAll.forEach(item=>{
							this.feeTotalCount += item.fee;
						})
						//直接嵌套显示
						dateTwoInstance = laydate.render({
							elem: '#dateTwoInput',
							position: 'static',
							value: dateValue,
							showBottom: false,
							ready: function(date) {
								$('#dateTwoInput .layui-laydate-content').find("td").each(function(i, e) {
									for (let i = 0; i < timeTwoAll.length; i++) {
										if (JSON.stringify(timeTwoAll[i].time) === JSON.stringify($(e).attr('lay-ymd'))) {
											// console.log(timeTwoAll[i].time)
											if(timeTwoAll[i].chargeType != null && timeTwoAll[i].chargeType === 0){
												$(e).addClass('layui-text-bg11');
												$(e).append(`<span>包月</span><i></i>`);
											}else{
												$(e).addClass('layui-text-bg01');
												$(e).append(`<span>${timeTwoAll[i].fee}元</span><i></i>`);
											}
											return;
										}
									}
								});
							}
						});
						//回调 标记
						/* $('.laydate-next-y,.laydate-next-m,.laydate-prev-y,.laydate-prev-m,.laydate-set-ym,.layui-laydate-content')
							.click(function() {
								$('#dateTwoInput .layui-laydate-content').find("td").each(function(i, e) {
									// console.log(dates.indexOf($(e).attr('lay-ymd')));
									if (!$(e).hasClass('layui-bg01')) {
										if (timeTwoAll.some(item => JSON.stringify(item.time) == $(e).attr(
												'lay-ymd'))) {
											$(e).addClass('layui-bg01');
										}
									}
								});
							}); */
					},
					topUpTap() {
						this.top_upPicker = true;
						// axios.get('/s/course/listNotPage/'+agengtId, {
						axios.get('/s/course/getPrice/' + agengtId, {
							params: {
								name: '晚餐'
							}
						}).then(function(res) {
							// this.selMoonPrice = res.data[0].month[0].price;
							this.selMoonPrice = res.data;
						}.bind(this));

					},
					baoYueTap() {
						laydate.render({
							elem: '#dateTopUpInput',
							value: this.selBaoYueYear,
							position: 'static',
							type: 'year',
							showBottom: false,
							ready: function(date) {},
							change: function(value, date, endDate) {
								app.selBaoYueYear = value;
								for (let i = 0; i < app.sel_price_moon.length; i++) {
									app.sel_price_moon[i].sel = false
								}
								$('#dateTopUpInput').empty();
							}
						});
					},
					showNotify(type, text) {
						this.showNotifyType = type;
						this.showNotifyText = text;
						this.promptShow = true;
						setTimeout(() => {
							this.promptShow = false;
						}, 2000);
					},
					lijizhifu() {
						this.lijizhifuDisable = true;
						/* if (this.topUpType == 1 & this.topUpPrice < 500) {
							this.showNotify('warning', '单次充值最少500元');
							this.lijizhifuDisable = false;
							return;
						} */
						if (this.topUpType == 2 & !this.sel_price_moon.some(item => item.sel == true)) {
							this.showNotify('warning', '请选择包月月份');
							this.lijizhifuDisable = false;
							return;
						}

						if (this.topUpType == 1) {
							axios.post('/s/order/addMealOrder', {
								personId: this.studentId,
								fee: Number(this.topUpPrice),
								rechargeMode: 0,
								remark: "单次餐费充值"
							}).then(function(response) {
								console.log(response)
								if (response.data.code == 0) {
									// this.payData = response.data.data;
									this.initWxPay(response.data.data);
								} else {
									this.showNotify('danger', response.data.msg);
									this.lijizhifuDisable = false;
								}
							}.bind(this)).catch(function(error) {
								console.error('Error fetching attendance records:', error);
								this.lijizhifuDisable = false;
							}.bind(this));
						} else {
							let selMoons = [];
							this.sel_price_moon.forEach(item => {
								if (item.sel) {
									selMoons.push(item)
								}
							})

							axios.post('/s/order/addMealOrder', {
								personId: this.studentId,
								fee: Number((selMoons.length * this.selMoonPrice).toFixed(2)) * 100,
								rechargeMode: 1,
								monthCount: selMoons.length,
								monthFor: selMoons[0].value < 10 ? `2025-0${selMoons[0].value}` :
									`2025-${selMoons[0].value}`,
								remark: "包月餐费充值"
							}).then(function(response) {
								console.log(response)
								if (response.data.code == 0) {
									// this.payData = response.data.data;
									this.initWxPay(response.data.data);
								} else {
									this.showNotify('danger', response.data.msg);
									this.lijizhifuDisable = false;
								}
							}.bind(this)).catch(function(error) {
								console.error('Error fetching attendance records:', error);
								this.lijizhifuDisable = false;
							}.bind(this));
						}
					},
					
					
					
					initWxPay(wxPayParams) {
						// console.log('初始化微信支付，参数:', wxPayParams);
						// 检查是否在微信环境中
						const isWechat = /micromessenger/i.test(navigator.userAgent.toLowerCase());
						if (!isWechat) {
							alert('请在微信中打开此页面');
							return;
						}

						// 使用官方推荐的WeixinJSBridge方式
						this.payWithWeixinJSBridge(wxPayParams);
					},

					payWithWeixinJSBridge(wxPayParams) {
						
						const onBridgeReady = () => {
							try {
								window.top.WeixinJSBridge.invoke( "getBrandWCPayRequest", {
									appId: wxPayParams.appId,
									timeStamp: wxPayParams.timeStamp.toString(),
									nonceStr: wxPayParams.nonceStr,
									package: wxPayParams.package_str,
									signType: 'RSA',
									paySign: wxPayParams.paySign
								}, (res) => {
									console.log('支付回调结果: ',res);
									if (res.err_msg === 'get_brand_wcpay_request:ok') {
										this.handlePaySuccess()
									}else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
										this.handlePayCancel();
									}else{
										this.handlePayFail();
									} 
									this.lijizhifuDisable = false;
								});
							} catch (e) {
								console.log('支付调用出错：', JSON.stringify(e));
							}
						};

						if (typeof window.top.WeixinJSBridge === "undefined") {
							// alert('⏳ WeixinJSBridge 尚未注入，继续等待...');
							this.lijizhifuDisable = false;
							// setTimeout(waitForBridge, 1000);
							if (document.addEventListener) {
								document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
							} else if (document.attachEvent) {
								document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
								document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
							}
						} else {
							this.lijizhifuDisable = true;
							// alert('✅ WeixinJSBridge 已准备好，立即调用支付');
							onBridgeReady();
						}
						
					},
					
					// 支付成功处理
					handlePaySuccess() {
						// 这里添加支付成功后的业务逻辑
						// 例如：跳转到成功页面、更新订单状态等
						this.showNotify('success', '支付成功');
					},
					
					// 支付取消处理
					handlePayCancel() {
						this.showNotify('warning', '您已取消支付');
					},
					
					// 支付失败处理
					handlePayFail() {
						this.showNotify('danger', '支付失败');
					},
				},
			});
		</script>
	</body>

</html>